{% extends "base.html" %}

{% block title %}条款声明 - 工时工具{% endblock %}

{% block extra_css %}
<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .section-fade {
            @apply opacity-0 translate-y-4 transition-all duration-700;
        }
        .section-fade.active {
            @apply opacity-100 translate-y-0;
        }
        .text-balance {
            text-wrap: balance;
        }
        .contact-item {
            @apply flex items-center p-3 rounded-lg hover:bg-gray-50 transition-all duration-300;
        }
        .disclaimer-badge {
            @apply inline-block bg-warning/10 text-warning px-3 py-1 rounded-full text-sm font-medium mb-4;
        }
        .btn-disabled {
            @apply opacity-50 cursor-not-allowed pointer-events-none;
        }
    }
</style>
{% endblock %}

{% block content %}
    <!-- 顶部提示 -->
    <div class="bg-blue-50 border-l-4 border-primary p-4 mb-8 rounded-r-lg">
        <div class="flex items-center">
            <i class="fa fa-info-circle text-primary mr-3"></i>
            <p class="text-gray-700">请仔细阅读以下条款，需要浏览至页面最下方点击是否同意</p>
        </div>
    </div>

    <!-- 页面标题 -->
    <div class="text-center mb-12 mt-4">
        <h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-gray-800 mb-3">条款声明</h1>
        
        <!-- 强调第三方工具性质 -->
        <div class="disclaimer-badge">
            <i class="fa fa-exclamation-circle mr-1"></i>第三方工时工具声明
        </div>
        <p class="text-gray-600 max-w-2xl mx-auto">
            本工具为第三方工时计算工具，所提供的数据和计算结果仅为参考，
            接近实际情况但并非实际工时数据。具体工时结果请以官方实际记录为准，
            我们不为预测结果提供官方保证。
        </p>
        <div class="w-20 h-1 bg-primary/50 mx-auto mt-4 rounded-full"></div>
    </div>

    <!-- 条款内容 -->
    <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-10">
        <div class="space-y-8">
            <!-- 生效日期 -->
            <div class="text-right text-sm text-gray-500 italic" id="effective-date"></div>

            <!-- 1. 接受条款 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">1</span>
                    接受条款
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        本条款声明（"条款"）是您（"用户"）与开发者（"我们"）之间关于使用工时利用率计算工具（"工具"）的法律协议。
                        通过访问或使用本工具，您确认您已阅读、理解并同意受本条款的约束。如果您不同意本条款的任何部分，
                        您不得使用本工具。
                    </p>
                    <p class="text-balance">
                        我们保留随时修改本条款的权利。任何修改将在发布后立即生效。您继续使用本工具即表示您接受修改后的条款。
                        建议您定期查阅本条款以了解最新内容。
                    </p>
                </div>
            </section>

            <!-- 2. 服务说明 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">2</span>
                    服务说明
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        工时利用率计算工具是一个提供工时数据计算和分析的在线服务，旨在帮助用户计算工作效率百分比。
                        本工具支持上传CSV或XLSX格式的数据文件，并结合用户输入的常班、加班和非产工时信息进行计算。
                    </p>
                    <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-warning my-4">
                        <p class="text-balance text-gray-700">
                            <strong>重要声明：</strong>本工具为第三方开发的非官方工具，所有计算结果仅为模拟参考，
                            与实际工时可能存在差异，具体请以官方系统记录为准。我们不对计算结果的准确性和适用性
                            提供任何形式的保证。
                        </p>
                    </div>
                    <p class="text-balance">
                        我们保留随时修改、暂停或终止本工具任何部分的权利，无需事先通知。我们不对因服务中断或终止给用户带来的任何损失承担责任。
                    </p>
                </div>
            </section>

            <!-- 3. 用户义务 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">3</span>
                    用户义务
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">使用本工具时，您同意：</p>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>仅上传符合工具要求格式（CSV或XLSX）的文件</li>
                        <li>确保上传的数据不包含任何非法、有害、威胁、诽谤、骚扰、侵犯隐私或知识产权的内容</li>
                        <li>不尝试未经授权访问本工具的任何部分或相关系统</li>
                        <li>不使用任何自动化工具（如爬虫）访问或使用本工具，除非获得我们的书面许可</li>
                        <li>不从事任何可能干扰或损害本工具正常运行的行为</li>
                        <li>提供准确、完整的工时信息以获得可靠的计算结果</li>
                        <li>理解并接受本工具计算结果仅为参考，非官方数据</li>
                    </ul>
                </div>
            </section>

            <!-- 4. 数据隐私 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">4</span>
                    数据隐私与安全
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        您上传至本工具的数据仅用于计算工时利用率，我们不会将您的原始数据用于其他目的。
                        所有数据处理均在您的浏览器会话中进行，除非必要，否则不会存储您的原始数据。
                    </p>
                    <p class="text-balance">
                        我们采取合理的技术措施保护您的数据安全，但由于互联网传输的特性，我们不能完全保证数据传输的绝对安全。
                        您确认理解并接受由此带来的潜在风险。
                    </p>
                    <p class="text-balance">
                        您应对自己的数据安全负责，包括但不限于妥善保管您的设备和账户信息，及时退出公共设备上的会话等。
                    </p>
                </div>
            </section>

            <!-- 5. 知识产权 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">5</span>
                    知识产权
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        本工具的所有知识产权（包括但不限于源代码、设计、文字、图像、商标等）均归我们所有或已获得合法授权。
                        未经我们书面许可，您不得复制、修改、分发、出售或租赁本工具的任何部分。
                    </p>
                    <p class="text-balance">
                        您上传至本工具的数据的知识产权归您或您的授权方所有。通过上传数据，您授予我们有限的、非独占的许可，
                        仅用于提供本工具的计算服务。
                    </p>
                    <p class="text-balance">
                        本工具使用的第三方库和资源（如Chart.js、Tailwind CSS等）遵循其各自的许可协议。
                    </p>
                </div>
            </section>

            <!-- 6. 免责声明 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">6</span>
                    免责声明
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <div class="bg-red-50 p-4 rounded-lg border-l-4 border-danger my-4">
                        <p class="text-balance text-gray-700">
                            <strong>免责声明：</strong>本工具为第三方非官方工具，所有计算结果仅供参考，不代表实际工时数据。
                            计算结果可能与实际情况存在偏差，具体工时信息请以官方系统记录为准。我们不对计算结果的准确性、
                            完整性、可靠性作出任何明示或暗示的保证，也不对因使用本工具计算结果而导致的任何损失或损害承担责任。
                        </p>
                    </div>
                    <p class="text-balance">
                        本工具按"现状"提供，我们不对本工具的准确性、完整性、可靠性或可用性作出任何明示或暗示的保证。
                        您使用本工具的风险由您自行承担。
                    </p>
                    <p class="text-balance">
                        在法律允许的最大范围内，我们不对因使用或无法使用本工具而导致的任何直接、间接、偶然、特殊或后果性损害
                        （包括但不限于利润损失、数据丢失等）承担责任，无论这些损害是否由于使用或未能使用本工具的结果、
                        与本工具相关的任何服务或信息、或第三方提供的内容或服务引起。
                    </p>
                </div>
            </section>

            <!-- 7. 终止使用 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">7</span>
                    终止使用
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        您可以随时停止使用本工具。我们有权在发现您违反本条款的任何规定时，立即终止您对本工具的访问权限，
                        且无需事先通知。
                    </p>
                    <p class="text-balance">
                        本条款的某些规定（包括但不限于知识产权、免责声明、法律适用等）在您停止使用本工具后仍然有效。
                    </p>
                </div>
            </section>

            <!-- 8. 法律适用 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">8</span>
                    法律适用与争议解决
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        本条款受中华人民共和国法律管辖，不适用其冲突法规则。
                    </p>
                    <p class="text-balance">
                        因本条款引起的或与本条款有关的任何争议，双方应首先通过友好协商解决；协商不成的，
                        任何一方均有权向我们所在地有管辖权的人民法院提起诉讼。
                    </p>
                </div>
            </section>

            <!-- 9. 联系方式 -->
            <section class="section-fade">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">9</span>
                    联系方式
                </h2>
                <div class="pl-8 text-gray-700 space-y-3">
                    <p class="text-balance">
                        如果您对本条款声明有任何疑问或建议，请通过以下方式联系我们：
                    </p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
                        <a href="https://gitee.com/to-DiTing/utilizationof-man-hours" class="contact-item hover:text-primary">
                            <i class="fa fa-github text-gray-500 mr-3 text-xl"></i>
                            <span class="text-gray-600">Gitee 仓库</span>
                        </a>

                        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=HpFfkYcMhOxhwdU0pcjIO_MnFcvgdz5S" class="contact-item hover:text-qq">
                            <i class="fa fa-qq text-qq mr-3 text-xl"></i>
                            <span class="text-gray-600">QQ: 2707911139</span>
                        </a>

                        <a href="#" class="contact-item group hover:text-wechat relative">
                            <i class="fa fa-weixin text-wechat mr-3 text-xl"></i>
                            <span class="text-gray-600">微信: 落叶.</span>
                            <div class="absolute right-0 top-0 transform translate-x-full translate-y-0 bg-white p-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10">
                                <img src="../static/images/wechat.jpg" alt="微信二维码" class="w-32 h-32">
                            </div>
                        </a>

                        <a href="#" class="contact-item hover:text-primary">
                            <i class="fa fa-globe text-gray-500 mr-3 text-xl"></i>
                            <span class="text-gray-600">官方博客</span>
                        </a>

                        <a href="https://space.bilibili.com/473283577" class="contact-item hover:text-bilibili">
                            <i class="fa fa-play-circle text-bilibili mr-3 text-xl"></i>
                            <span class="text-gray-600">Bilibili: 请叫我小霖</span>
                        </a>

                        <a href="mailto:support@gongshi-tool.com" class="contact-item hover:text-primary">
                            <i class="fa fa-envelope text-primary mr-3 text-xl"></i>
                            <span class="text-gray-600">邮箱: lslautomail@yeah.net</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 确认区域 -->
    <div class="bg-white rounded-xl shadow-lg p-6 text-center mb-10">
        <p class="text-gray-700 mb-6">
            继续使用本工具即表示您已阅读并同意上述所有条款条件和声明说明，
            并理解本工具为第三方工具，计算结果仅为参考，不代表实际工时数据。
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="/" id="agreeBtn" class="btn-primary flex-1 sm:flex-none sm:w-40 btn-disabled">
                我已阅读并同意 <span id="countdown">(10s)</span>
            </a>
            <a href="#" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-all duration-300 flex-1 sm:flex-none sm:w-40">
                不同意
            </a>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
    // 移动端菜单切换已在base.html中实现，无需重复

    
    // 滚动动画效果
    function rollingEffect(){
        const sections = document.querySelectorAll('.section-fade');

        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver(function(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        sections.forEach(section => {
            observer.observe(section);
        });

        // 10秒后启用同意按钮
        let seconds = 10;
        const countdownEl = document.getElementById('countdown');
        const agreeBtn = document.getElementById('agreeBtn');

        const countdownInterval = setInterval(() => {
            seconds--;
            countdownEl.textContent = `(${seconds}s)`;

            if (seconds <= 0) {
                clearInterval(countdownInterval);
                agreeBtn.classList.remove('btn-disabled');
                countdownEl.textContent = '';
            }
        }, 1000);

    }

    //调用base接口
    function getBase() {
        // 调用后端/base接口
        fetch('/base')
        // 第一步：处理响应状态（检查是否请求成功）
        .then(response => {
            if (!response.ok) {
                // 如果HTTP状态码不是200-299，抛出错误
                throw new Error(`请求失败，状态码: ${response.status}`);
            }
            // 将响应解析为JSON格式
            return response.json();
        })
        // 第二步：处理解析后的JSON数据
        .then(data => {
            // terms_version，设置默认值以防为空
            // 将版本信息显示到页面
            document.getElementById('effective-date').textContent = data.terms_version || '未知版本';
        })
        // 捕获所有可能的错误（网络错误、解析错误等）
        .catch(error => {
            console.error('获取更新日期信息失败:', error);
            document.getElementById('effective-date').textContent = '更新日期加载失败';
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        // 滚动效果函数
        rollingEffect();
        //

    });
</script>
{% endblock %}